<template>
  <div>
    <h4 class="scrolltitles">热挺好书 <span @click="lookall">查看全部</span></h4>
    <div class="xscrolls" ref="wrappers">
      <ul>
        <li v-for=" n in hotList" @click="hotclick(n.bookid)">
          <img :src='URL + n.bookimg' alt="">
          <div>
            <h5>{{n.bookname}}</h5>
            <p><span>{{n.book_count}}</span></p>
            <p>{{n.bookprice}}</p>
          </div>
        </li>
      </ul>
    </div>



  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "hotList",
    props:['hotList'],
    data(){
      return{
        scrolls:'' ,

      }
    },
    mounted() {
      setTimeout(()=>{
        console.log(this.hotList)
      },2000)

      setTimeout(()=>{
        if (!this.scrolls) {
          this.scrolls = new BScroll(this.$refs.wrappers, {scrollX: true,click: true,
            onBeforeScrollStart: function ( e ) {
              if ( this.absDistX > (this.absDistY + 5 ) ) {
                e.preventDefault();
              }
            },
            //解决第一次无法滑动的问题
            onTouchEnd: function () {
              var self = this;
              if (self.touchEndTimeId) {
                clearTimeout(self.touchEndTimeId);
              }

              self.touchEndTimeId = setTimeout(function () {
                self.absDistX = 0;
                self.absDistY = 0;
              }, 600);
            }
          })
        } else {
          this.scrolls.refresh()
        }
      },100)
    },
    methods:{
      lookall(){
        this.$router.push({name:'hotbook'})
      },
      hotclick(id){
        this.$router.push({name:'particulars',params:{'id':id}})//调转详情页

      }
    }
  }
</script>

<style scoped>
  .scrolltitles{
    margin-bottom: .1rem;
    font-weight: bold;
  }
  .scrolltitles span{
    font-size: .12rem;
    float: right;
    font-weight: normal;
    margin-right: .15rem;
  }
  .xscrolls {
    width: 100%;
    overflow: hidden;
    height: 1.65rem;
  }
  .xscrolls li{
    float: left;
    width: 1.1rem;
    padding: 0 .1rem;
  }
  .xscrolls li h5{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xscrolls ul{
    width: 12rem;
  }
  .xscrolls img{
    height: 70%;
    width: 100%;
  }

</style>
